<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>日语学习</title>
    <link rel="stylesheet" href="../bootstrap-4.3.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../index.css">
    <link rel="stylesheet" href="video.css">
    <script src="../jquery/jquery.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        * {
            user-select: none;
        }

        .layui-color {
            color: black;
        }

        .layui-colorW {
            color: rgb(255, 255, 255);
        }

        .layui-refresh {
            margin: 0 auto;
        }

        .layui-refresh i {
            display: block;
            transition: all 1s ease-in-out;
            transform-origin: center;
            user-select: none;
        }

        .layui-refresh:hover i {
            display: block;
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" style="color: #fff" href="../index.html">日语学习</a>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
            <ul class="layui-nav" style="background-color:#343a40!important" lay-filter="">
                <li class="layui-nav-item"><a href="../index.html">主页</a></li>
                <li class="layui-nav-item layui-this"><a href="">趣图趣文</a></li>
                <li class="layui-nav-item">
                    <a id="kok" href="javascript:;">更多</a>
                    <dl class="layui-nav-child">
                        <!-- 二级菜单 -->
                        <dd><a href="">日本文化</a></dd>
                        <dd><a href="">动漫语录</a></dd>
                        <dd><a href="">影视作品</a></dd>
                    </dl>
                </li>

                <!-- ()=>{document.getElementById('layerNotice').click()} -->
                <li class="layui-nav-item"><a href="javascript:;" onclick="layuiNotice();">社区</a>
                    <div class="site-demo-button" id="layerNotice" style="margin-bottom: 0;"> <button data-method="notice" class="layui-btn">示范一个公告层</button></div>
                </li>
                <li class="layui-nav-item" style="margin-top:4px">
                    <form class="form-inline my-2 my-lg-0 nav-form">
                        <input class="form-control mr-sm-2" type="search" placeholder="大人，您要搜什么(*╹▽╹*)" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
                    </form>
                </li>
            </ul>
        </div>
    </nav>
    <!-- 背景满天星 -->
    <div style="position:fixed;width: 100%;height:100%;top:0;z-index: -1;">
        <div id="background" class="wall"></div>
        <div id="midground" class="wall"></div>
        <div id="foreground" class="wall"></div>
        <div id="top" class="wall"></div>
    </div>
    <audio controls autoplay>
        <source src="../asset/media/zzsc.mp3">
    </audio>
    <!-- 主体开始 -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4"><img src="../asset/img/titan03.png" alt="" style="width: 100%;"></div>
            <div class="col-md-8">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend class="layui-colorW">进击的巨人语录</legend>
                </fieldset>
                <div class="layui-collapse" lay-accordion="">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-green">征途即是星辰与大海、</h2>
                        <div class="layui-colla-content layui-show layui-bg-gray">
                            <p class="layui-color">一切未知，来自社会底层备受嘲笑的我们仍在努力！
                                <br> 加油！！！
                            </p>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-black">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
                        <div class="layui-colla-content layui-bg-gray">
                            <p class="layui-color">
                                有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊
                            </p>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-green">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
                        <div class="layui-colla-content layui-bg-gray">
                            <p class="layui-color">
                                因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo
                            </p>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-black">贤心是男是女？</h2>
                        <div class="layui-colla-content layui-bg-gray">
                            <p class="layui-color">man！ 所以这个问题不要再出现了。。。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend class="layui-colorW">进击的巨人语录</legend>
                </fieldset>
                <div class="layui-collapse" lay-accordion="">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-green">征途即是星辰与大海、</h2>
                        <div class="layui-colla-content layui-show layui-bg-gray">
                            <p class="layui-color">一切未知，来自社会底层备受嘲笑的我们仍在努力！
                                <br> 加油！！！
                            </p>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-black">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
                        <div class="layui-colla-content layui-bg-gray">
                            <p class="layui-color">
                                有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊
                            </p>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-green">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
                        <div class="layui-colla-content layui-bg-gray">
                            <p class="layui-color">
                                因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo
                            </p>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-black">贤心是男是女？</h2>
                        <div class="layui-colla-content layui-bg-gray">
                            <p class="layui-color">man！ 所以这个问题不要再出现了。。。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4"><img src="../asset/img/titan04.png" alt="" style="width: 100%;"></div>
        </div>
        <div class="row">
            <div class="col-md-4"><img src="../asset/img/titan05.png" alt="" style="width: 100%;"></div>
            <div class="col-md-8">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend class="layui-colorW">进击的巨人语录</legend>
                </fieldset>
                <div class="layui-collapse" lay-accordion="">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-green">征途即是星辰与大海、</h2>
                        <div class="layui-colla-content layui-show layui-bg-gray">
                            <p class="layui-color">一切未知，来自社会底层备受嘲笑的我们仍在努力！
                                <br> 加油！！！
                            </p>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-black">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
                        <div class="layui-colla-content layui-bg-gray">
                            <p class="layui-color">
                                有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊
                            </p>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-green">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
                        <div class="layui-colla-content layui-bg-gray">
                            <p class="layui-color">
                                因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo
                            </p>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-black">贤心是男是女？</h2>
                        <div class="layui-colla-content layui-bg-gray">
                            <p class="layui-color">man！ 所以这个问题不要再出现了。。。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend class="layui-colorW">进击的巨人语录</legend>
                </fieldset>
                <div class="layui-collapse" lay-accordion="">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-green">征途即是星辰与大海、</h2>
                        <div class="layui-colla-content layui-show layui-bg-gray">
                            <p class="layui-color">一切未知，来自社会底层备受嘲笑的我们仍在努力！
                                <br> 加油！！！
                            </p>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-black">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
                        <div class="layui-colla-content layui-bg-gray">
                            <p class="layui-color">
                                有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊
                            </p>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-green">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
                        <div class="layui-colla-content layui-bg-gray">
                            <p class="layui-color">
                                因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo
                            </p>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title layui-bg-black">贤心是男是女？</h2>
                        <div class="layui-colla-content layui-bg-gray">
                            <p class="layui-color">man！ 所以这个问题不要再出现了。。。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4"><img src="../asset/img/titan06.png" alt="" style="width: 100%;"></div>
            <hr>
            <div class="layui-refresh"><button type="button" class="layui-btn ">刷 新 <i class="layui-icon">&#xe669;</i>
                </button></div>
            <br>
            <br>
            <br>
            <br>
        </div>
    </div>

    <!-- 返回顶部小人物 -->

    <!-- <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> -->
    <a href="javascript:scroll(0,0)" style="width:60px;
    height:70px;
    background-image: url('../asset/img/up@1x.png');
    background-size:100% auto;
    bottom: 0px;
    right:0px;
    position: fixed" data-toggle="tooltip" data-placement="top" title="点我返回顶部哦"></a>
    <script src="../bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../index.js"></script>
    <script src="interesting.js"></script>
    <script>
        layui.use(['form', 'layedit', 'laydate'], function() {
            var form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit,
                laydate = layui.laydate;

            //日期
            laydate.render({
                elem: '#date'
            });
            laydate.render({
                elem: '#date1'
            });

            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');

            //自定义验证规则
            form.verify({
                title: function(value) {
                    if (value.length < 5) {
                        return '标题至少得5个字符啊';
                    }
                },
                pass: [
                    /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
                ],
                content: function(value) {
                    layedit.sync(editIndex);
                }
            });

            //监听指定开关
            form.on('switch(switchTest)', function(data) {
                layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                    offset: '6px'
                });
                layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
            });

            //监听提交
            form.on('submit(demo1)', function(data) {
                layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                })
                return false;
            });

            //表单赋值
            layui.$('#LAY-component-form-setval').on('click', function() {
                form.val('example', {
                    "username": "贤心" // "name": "value"
                        ,
                    "password": "123456",
                    "interest": 1,
                    "like[write]": true //复选框选中状态
                        ,
                    "close": true //开关状态
                        ,
                    "sex": "女",
                    "desc": "我爱 layui"
                });
            });

            //表单取值
            layui.$('#LAY-component-form-getval').on('click', function() {
                var data = form.val('example');
                alert(JSON.stringify(data));
            });

        });
    </script>

</body>

</html>